<template>
  <div class="real-name">
    <van-nav-bar :border="false" placeholder fixed>
      <template #left>
        <svg-icon name="arrows" @click="topReturnClick" />
      </template>
      <template #title>
        <span class="title-name">个人实名认证</span>
      </template>
    </van-nav-bar>
    <van-tabs
      class="real-tabs"
      v-model:active="activeName"
      line-width="20"
      title-active-color="#2489f2"
    >
      <van-tab title="手机运营商认证" name="phone">
        <mobile-authentication ref="MobileAuthenticationRef" />
      </van-tab>
      <van-tab title="人脸识别" name="face">
        <facial-recognition ref="facialRecognitionRef" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import MobileAuthentication from './component/mobile-Authentication.vue'
import facialRecognition from './component/facial-recognition.vue'
export default defineComponent({
  components: { MobileAuthentication, facialRecognition },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeName = ref('')
    activeName.value = route.query.type as string

    const MobileAuthenticationRef =
      ref<InstanceType<typeof MobileAuthentication>>() // 手机认证
    const facialRecognitionRef = ref<InstanceType<typeof facialRecognition>>() // 人脸识别
    // 返回
    const topReturnClick = () => {
      router.push({
        path: 'real-name-mode',
        query: {
          contractId: route.query.contractId
        }
      })
    }
    return {
      activeName,
      MobileAuthenticationRef,
      facialRecognitionRef,
      topReturnClick
    }
  }
})
</script>

<style scoped lang="less">
.real-name {
  width: 100%;
  height: 100%;
  .title-name {
    font-size: 17px;
    color: #101010;
    font-weight: 700;
  }
  .real-tabs {
    height: calc(100% - 46px);
    :deep(.van-tab__text--ellipsis) {
      font-size: 15px;
    }
    :deep(.van-tabs__line) {
      background-color: #2489f2;
    }
    :deep(.van-tabs__content) {
      height: calc(100% - 44px);
      .van-tab__pane {
        height: 100%;
      }
    }
  }
}
</style>
